<template>
  <div class="">
    <el-container class="home-container">
  <!-- 头部区域 -->
  <el-header>
       <h1>首页</h1>
      <input type="button" value="注销" @click="quit">
    </el-header>
  <!-- 页面主体区域 -->
  <el-container>
    <!-- 侧边栏 -->
     <el-aside :width="iscol?'64px':'200px'">
          <!-- 侧边栏菜单 -->
          <el-menu
            background-color="#bbb"
            text-color="#fff"
            active-text-color="#ffd04b"
            :unique-opened="true"
            :collapse="iscol"
            :collapse-transition="false"
            :default-active="currentPath"
            router>
           <el-button class="keBtn" @click="changeBtn"></el-button>
            <!-- 一级菜单 -->
            <el-submenu :index="item.id+''" v-for="item in uesrlist" :key="item.id">
              <!-- 一级菜单模板 -->
              <template slot="title">
                <!-- 图标 -->
                <i :class="classlist[item.id]"></i>
                <!-- 文本 -->
                <span>{{item.authName}}</span>
              </template>
              <!-- 二级子菜单 -->
              <el-menu-item :index="setitem.path" v-for="setitem in item.children" :key="setitem.id" @click="changecurrentpath(setitem.path)">
                <!-- 二级菜单模板 -->
                <template slot="title">
                  <!-- 图标 -->
                  <i class="el-icon-loading"></i>
                  <!-- 文本 -->
                  <span>{{setitem.authName}}</span>
                </template>
              </el-menu-item>
            </el-submenu>
            
          </el-menu>
        </el-aside>
    <!-- 主体结构 -->
    <el-main>
      <router-view></router-view>
    </el-main>
  </el-container>
</el-container>
  
  </div>
</template>

<script>
export default {
    name: "Main",
  components:{},
  data(){
    return {
      uesrlist:[],
      classlist:{
        "125":"iconfont icon-user",
        "103":"iconfont icon-3702mima",
        "101":"iconfont icon-shangpin",
        "102":"iconfont icon-danju",
        "145":"iconfont icon-baobiao"

      },
      iscol:false,
      currentPath:null,
    }
  },
  created(){
    this.geteuserList();
    // 拿到path值 给currentpath
  this.currentPath=window.sessionStorage.getItem('cpath')
  },
  mounted(){},
  watch:{},
  computed:{},
  methods:{
      quit(){
          window.sessionStorage.clear()
          this.$router.push("/login")
      },
      geteuserList(){
        this.$axios.get("menus").then(val=>{
        
          if(val.meta.status!=200){
             return this.$message.error("获取信息错误")
          }
          this.uesrlist=val.data
        })
      },
      changeBtn(){
        this.iscol=!this.iscol
      },
      changecurrentpath(path){
        window.sessionStorage.setItem('cpath',path)
      }
  },
}
</script>
<style lang="css" scoped>
.home-container {
  height: 100%;
}
.el-header{
  background-color:#ddd;
}
.el-aside{
  background-color:#bbb;
}
.el-main{
  background-color:#eaedf1;
}
.el-submenu{
  text-align: left;
}
.el-submenu__title i {
color: aqua;
}
.el-submenu__title * {
  color: rgb(9, 255, 0);
}
.keBtn{
  background-color: rgb(9, 255, 0);
  height: 20px;
  width: 40px;
}
</style>